<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// import { usePageDict, useSysDict } from '@/hooks/useDict'
import { getDetailApi } from '@/api/asset/car-insure'
import commercial from './components/commercial.vue'
import compulsory from './components/compulsory.vue'

// const dict = usePageDict('shortOrderDict')
// const sysDict = useSysDict(['equipment_brand', 'connection_mode'])
const { statusBarHeight } = uni.getSystemInfoSync()
const id = ref(null) //保养单id
const insureKind = ref(null)
const main = ref(null) //保养详情

const getDetail = async (id) => {
  const res = await getDetailApi({id:id})
  main.value = res.result
}
onLoad((options)=>{
  id.value = options.id
  insureKind.value = options.insure  //0交强 1商业
  if(id.value){
    getDetail(id.value)
  }
})

</script>

<template>
  <view class="viewports">
    <view class="car-info-content" v-if="main">
      <view>{{ main.licenseNo || '-' }}</view>
      <view>{{ main.modelName || '-' }}</view>
    </view>
    <ve-card style="margin-top: 24rpx;" v-if="main">
      <ve-cell label="车辆当前归属门店">{{ main.carSiteName || '-' }}</ve-cell>
      <ve-cell label="归属车场">{{ main.libraryName || '-' }}</ve-cell>
      <ve-cell label="车架号">{{ main.vin || '-' }}</ve-cell>
      <ve-cell label="保险状态">{{ main.insureStatusStr || '-' }}</ve-cell>
    </ve-card>
    <!-- 交强 -->
    <compulsory v-if="insureKind == 0" :record="main"></compulsory>
    <!-- 商业 -->
    <commercial v-if="insureKind == 1" :record="main"></commercial>
    <view style="width: 100%;height: 20rpx;"></view>
  </view>

</template>

<style lang="scss" scoped>
page {
  background: #F7F8FA;
}
.viewports {
  padding: 24rpx;background: #F7F8FA;height: 100vh;
}

.car-info-content {
  height: 168rpx;
  background-image: url('../../../../static/images/carinfo-bc.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: self-start;
  justify-content: center;
  padding-left: 32rpx;
  color: #ffffff;
  font-family: PingFang SC-Regular, PingFang SC;

  view:nth-of-type(1) {
    font-size: 40rpx;
    font-weight: 600;
    margin-bottom: 4rpx;
  }
  view:nth-of-type(2) {
    margin-top: 4rpx;
    font-size: 28rpx;
    font-weight: 400;
  }
}

:deep(.ve-cell-title) {
  width: 240rpx;
  max-width: 240rpx;
}

</style>
